<template>
    <tiny-layout class="tiny-layout-tag1">
      <tiny-row :flex="true" :gutter="10">
        <tiny-col :span="6" :no="3">
          <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
            <tiny-collapse-item title="CPU" name="1">
              <!-- <tiny-col :span="12"> -->
                <tiny-row :flex="true">
                  <tiny-col :span="6" :no="1">核心数 </tiny-col>
                  <tiny-col :span="6" :no="1">{{ data.systemInfo.cpu.cpuNum }}</tiny-col>
                </tiny-row>
                <tiny-divider ></tiny-divider>
                <tiny-row :flex="true">
                  <tiny-col :span="6" :no="1"> 用户使用率</tiny-col>
                  <tiny-col :span="6" :no="1"> {{ data.systemInfo.cpu.user }}%</tiny-col>
                </tiny-row>
                <tiny-divider ></tiny-divider>
                <tiny-row :flex="true">
                  <tiny-col :span="6" :no="1"> 系统使用率</tiny-col>
                  <tiny-col :span="6" :no="1"> {{ data.systemInfo.cpu.sys }}%</tiny-col>
                </tiny-row>
                <tiny-divider ></tiny-divider>
                <tiny-row :flex="true">
                  <tiny-col :span="6" :no="1"> 当前空闲率</tiny-col>
                  <tiny-col :span="6" :no="1"> {{ data.systemInfo.cpu.free }}%</tiny-col>
                </tiny-row>
              <!-- </tiny-col> -->
              <!-- <tiny-col :span="4" :no="1">
                <tiny-chart type="gauge" :options="data.cpuOption" height="120px"></tiny-chart>
              </tiny-col> -->
            </tiny-collapse-item>
          </tiny-collapse>
        </tiny-col>
        <tiny-col :span="6" :no="3">
          <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
            <tiny-collapse-item title="内存" name="2">
              <tiny-row :flex="true">
                <tiny-col :span="6" :no="1">总内存 </tiny-col>
                <tiny-col :span="6" :no="1">{{  data.systemInfo.hostJson.total }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="6" :no="1"> 已使用内存</tiny-col>
                <tiny-col :span="6" :no="1"> {{  data.systemInfo.hostJson.used }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="6" :no="1"> 剩余内存</tiny-col>
                <tiny-col :span="6" :no="1"> {{  data.systemInfo.hostJson.free }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="6" :no="1"> 剩余</tiny-col>
                <tiny-col :span="6" :no="1"> {{  data.systemInfo.hostJson.rate }}</tiny-col>
              </tiny-row>
             

            </tiny-collapse-item>
          </tiny-collapse>
        </tiny-col>

      </tiny-row>
    </tiny-layout>
    <tiny-layout class="tiny-layout-tag1">
      <tiny-row>
        <tiny-col :span="12" :no="3" style="padding-left: 0px">
          <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
            <tiny-collapse-item title="服务器信息" name="3">
              <tiny-row :flex="true">
                <tiny-col :span="3" :no="1">服务器名称 </tiny-col>
                <tiny-col :span="3" :no="1">{{  data.systemInfo.hostJson.hostName }}</tiny-col>
                <tiny-col :span="3" :no="1">操作系统 </tiny-col>
                <tiny-col :span="3" :no="1">{{  data.systemInfo.hostJson.osName }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="3" :no="1">服务器IP </tiny-col>
                <tiny-col :span="3" :no="1">{{  data.systemInfo.hostJson.address }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>

              <tiny-row :flex="true">
                  <tiny-col :span="2" :no="1"> 磁盘名称</tiny-col>
                  <tiny-col :span="2" :no="1"> 格式类型</tiny-col>
                  <tiny-col :span="2" :no="1"> 总容量</tiny-col>
                  <tiny-col :span="2" :no="1"> 已使用</tiny-col>
                  <tiny-col :span="2" :no="1"> 未使用</tiny-col>
                  <tiny-col :span="2" :no="1"> 空闲率</tiny-col>
                </tiny-row>
              <template v-for="(item) in data.systemInfo.store">
                <tiny-divider></tiny-divider>
                <tiny-row :flex="true">
                  <tiny-col :span="2" :no="1"> {{ item.name }}</tiny-col>
                  <tiny-col :span="2" :no="1"> {{ item.type }}</tiny-col>
                  <tiny-col :span="2" :no="1"> {{ item.total }}</tiny-col>
                  <tiny-col :span="2" :no="1"> {{ item.used }}</tiny-col>
                  <tiny-col :span="2" :no="1"> {{ item.free }}</tiny-col>
                  <tiny-col :span="2" :no="1"> {{ item.rate }}</tiny-col>
                </tiny-row>
              </template>
            </tiny-collapse-item>
          </tiny-collapse>
        </tiny-col>
      </tiny-row>

      <tiny-row>
        <tiny-col :span="12" :no="3" style="padding-left: 0px">
          <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
            <tiny-collapse-item title="java虚拟机信息" name="4">
              <tiny-row :flex="true">
                <tiny-col :span="3" :no="1">Java名称</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.JvmInfo.name}}</tiny-col>
                <tiny-col :span="3" :no="1">Java版本</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.JvmInfo.version }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="3" :no="1">项目路径</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.UserInfo.currentDir }}</tiny-col>
              </tiny-row>
              <tiny-divider></tiny-divider>
              <tiny-row :flex="true">
                <tiny-col :span="3" :no="1">总内存</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.max }}</tiny-col>
                <tiny-col :span="3" :no="1">已分配内存</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.total }}</tiny-col>
                <tiny-col :span="3" :no="1">已分配剩余内存</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.free }}</tiny-col>
                <tiny-col :span="3" :no="1">最大可用内存</tiny-col>
                <tiny-col :span="3" :no="1">{{data.systemInfo.java.Usable }}</tiny-col>
              </tiny-row>
            </tiny-collapse-item>
        
          </tiny-collapse>
        </tiny-col>
      </tiny-row>
    </tiny-layout>
</template>
<script  setup>
import { reactive, onBeforeMount, onMounted, getCurrentInstance } from 'vue';
import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
let { proxy } = getCurrentInstance();
//初始化
onBeforeMount(() => {
  //进页面触发查询
  querySystemInfo();
  loadData();
 
});
//渲染数据
onMounted(()=>{
  loadData();
})
const querySystemInfo = async () => {
  await proxy.$api.system.querySystemInfo().then(res => {
    data.systemInfo = res;

  });
      // 渲染数据
    loadData();
}

const data = reactive({
  activeTab: [],
  shortcutMenu: {},
  tasks: {},
  cpuOption:{},
  systemInfo: { cpu: { },hostJson:{},java:{JvmInfo:{},UserInfo:{}} },
  cpuChart: {}
});

const loadData = () => {
    loadCpuData();
}
const loadCpuData = () => {
  data.cpuOption = {
    type: "gauge",
    position: {
      center: ['50%', '50%'],
      radius: '100%'
    },
    text: {
      offset: ['0%', '35%'],
      fontSize: '14px',
      formatter(value) {
        return '{' + value + '%}{unit|%}'
      },
      formatterStyle: {
        value: {
          fontSize: 14,
          fontWeight: 'bolder',
          color: '#00111a',
          textShadowColor: '#ffffff',
          padding: [30, 0, 30, 0]
        },
        name: {
          fontSize: 12,
          color: '#595959',
          padding: [15, 5, 5, 5]
        },
      },
    },
    min: 0,
    max: 100,
    data: [
      {
        "value": data.systemInfo.cpu.used || 0 ,
        "name": "CPU使用"
      }
    ],
    splitColor: [
      [0.25, '#0d9458'],
      [0.5, '#eeba18'],
      [0.75, '#ec6f1a'],
      [1, '#f43146']
    ],
  }
}

data.activeTab = ['1', '2', '3', '4'];
    
</script>
<style lang="scss" scoped>

.tiny-divider.tiny-divider--horizontal {
    display: block;
    height: 1px;
    margin: 15px 0;
    opacity: var(--ti-divider-horizontal-opacity);
}
    
</style>